// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

// Pie Chart Example
var ctx = document.getElementById("myPieChart"); // 确保 HTML 中有对应的 canvas 元素
var myPieChart = new Chart(ctx, {
  type: 'pie', // 保持为 'pie'
  data: {
    labels: ["Direct", "Referral", "Social"],
    datasets: [{
      data: [55, 30, 15],
      backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
      hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
      hoverBorderColor: "rgba(234, 236, 244, 1)",
      borderWidth: 1 // 添加边框宽度设置以提高可见性
    }],
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      enabled: true, // 启用工具提示
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          var label = data.labels[tooltipItem.index];
          var value = dataset.data[tooltipItem.index];
          var total = dataset.data.reduce((a, b) => a + b, 0);
          var percent = Math.floor((value / total) * 100 + 0.5); // 计算总数的百分比
          return label + ': ' + value + ' (' + percent + '%)';
        }
      }
    },
    legend: {
      display: true, // 使图例可见
      position: 'top', // 设置图例位置
      labels: {
        fontColor: '#858796', // 图例文字颜色
        padding: 20, // 图例间隔
      },
    },
    // cutoutPercentage 移除以确保中间没有空白
  },
});